<script setup lang="ts">
import { ref } from 'vue';
import { useRoute } from 'vue-router';
    const queryName = ref('')
    const route = useRoute()
    // query传递参数-路径？key=value&key1=value
    // queryName.value = route.query.name as string
    // alert(route.query.index as string)

    // params传递参数-路径/:参数名称/:参数名称2 这个是在创建路由实例的时候写的index.ts,类似与鸿蒙的router_map.json文件
    // 传递参数的时候不需要写/name=张三,只需要写/张三 就可以了,自己可以对应赋值名字
    queryName.value = route.params.name as string
    if(route.params.index){
        alert(route.params.index)
    }

</script>

<template>
  <div class="search">
    <p>搜索关键字: {{ queryName }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>